#@head() 
#@header()
<title>客户列表</title>
#@aside("user")
<script type="text/javascript" src="#(path)/assets/js/jquery.tmpl.min.js"></script>
<style>
	.box-body{padding:5px !important}
</style>
<div class="content-wrapper">
	<section class="content">
	<div class="nav-tabs-custom">
		#@usersmenu("list")
		<div class="tab-content">
			<div class="tab-pane active" id="tab_1">
				<div class="input-group margin" style="width:80%;float:left">
					<label style="float:left;margin-top:8px;margin-left:5px;">注册时间：</label>
					<input type="text" id="startime" class="form-control" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" style="width:120px;float:left;margin-left:10px;">
					<span style="float:left;margin:5px 5px 0 5px;">—</span>
					<input type="text" id="endtime" class="form-control" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" style="width:120px;float:left;margin-right:20px;">
					<label style="float:left;margin-top:8px;margin-left:5px;">用户名：</label>
					<input type="text" id="usermobile" style="width:150px;" class="form-control" placeholder="" >
					<span style="float:left;margin-left:20px;" class="input-group-btn">
					  <button id="seachuser" type="button" class="btn btn-info btn-flat">搜索</button>
					</span>
					
				</div>
				<table class="table table-bordered" style="clear:both;width:40%;margin-left:10px;">
					<tbody>
					<tr>
					  <th>用户注册总数：<span id="total_users"></span> 人</th>
					  <!--<th>用户投资总数：<span id="total_trade_amount"></span> 元（体验金：<span id="total_experi_trade_amount"></span> 元）</th>
					-->
					</tr>
				  </tbody>
			    </table>
				<div class="box-body">
					<table  id="example1" class="table table-striped">
						<thead>
							<tr>
								<th>用户ID</th>
								<th>用户名</th>
								<th>真实姓名</th>
								<th>注册时间</th>
								<th>加入天数</th>
								<th>客服编号</th>
								<th>客服姓名</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="userlist">
							
						</tbody>
					</table>
					<div class="box-footer clearfix">
					  <ul class="pagination pagination-sm no-margin pull-right">
						<li id="userlist1"><a href="#">首页</a></li>
						<li id="userlist2"><a href="#">上一页</a></li>
						<li><a href="#">第<span id="userlist5"></span>页 共<span id="userlist6"></span>页</a></li>
						<li id="userlist3"><a href="#">下一页</a></li>
						<li id="userlist4"><a href="#">尾页</a></li>
					  </ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	</section>
</div>
#@footer()
<script id="userlistall" type="text/x-jquery-tmpl">
	<tr>
		<td>${id}</td>
		<td>${mobile}</td>
		<td>${real_name}</td>
		<td>${create_time}</td>
		<td>${days} 天</td>
		<td>${workcode}</td>
		<td>${work_name}</td>
		<td>${status}</td> 
		<td> 
			<div class="btn-group">
			  <button onclick="location.href='#(path)/admin/page/user-userinfo?id=${id}'" type="button" class="btn btn-info">查看</button>
			</div>
		</td>
	</tr>
</script>
<script>
 $(document).ready(function(){
		var startime = "";
		var endtime = "";
		var totalPage = 1;
		var pageNumber = 1;
		var usermobile = "";
		pageNumber = 1;
		$("#userlist").empty();
		userlist(1,"",startime,endtime);
		$("#userlist5").html(pageNumber);
		$("#userlist1").click(function(){
			$("#userlist").empty();
			pageNumber = 1;
			userlist(1,usermobile,startime,endtime); 
			$("#userlist5").html(pageNumber);
		});
		$("#userlist2").click(function(){
			if(pageNumber==1){
				alert("当前页是首页!");
			}else{
			$("#userlist").empty();
			pageNumber = pageNumber-1;
			userlist(pageNumber,usermobile,startime,endtime);
			$("#userlist5").html(pageNumber);
			}
		});
		$("#userlist3").click(function(){
			if(pageNumber==totalPage){
				alert("当前页是尾页!");
			}else{
			$("#userlist").empty();
			pageNumber = pageNumber +1;
			userlist(pageNumber,usermobile,startime,endtime);
			$("#userlist5").html(pageNumber);
			}
		});
		$("#userlist4").click(function(){
			$("#userlist").empty();
			userlist(totalPage,usermobile,startime,endtime);
			pageNumber = totalPage;
			$("#userlist5").html(pageNumber);
		});
		$("#seachuser").click(function(){ 
			startime = $("#startime").val();
			endtime = $("#endtime").val(); 
			$("#userlist").empty();
			usermobile = $("#usermobile").val();
			userlist(1,usermobile,startime,endtime);
			pageNumber = 1; 
			$("#userlist5").html(pageNumber);
		});
		function userlist(page,usermobile,startime,endtime){
			$.getJSON("/user/list?token=#(session.token??)&page="+page+"&proStatus=0&size=12&mobile="+usermobile+"&createTimeStart="+startime+"&createTimeEnd="+endtime, function(userli) {
				console.log(userli);
				totalPage = userli.data.page.totalPage;
				$("#userlist6").html(totalPage);
				$("#total_users").html(userli.data.page.totalRow);
				$.each(userli.data.page.list, function(i, item){ 
					if(item.status=="normal"){
						var status = "正常";
					}else if(item.status=="disable"){
						var status = "禁用";
					}else if(item.status=="freeze"){
						var status = "冻结";
					}
					if(item.agent_id > 0 ){
						var workcode = item.agent.workcode;
						var work_name= item.agent.real_name;
					}else{
						var workcode = "";
						var work_name= "";
					}
					var now = getNowFormatDate().substring(0,10);
					var days = DateDiff((item.create_time).substring(0,10),now)+1;
					var userlist = {work_name:work_name,workcode:workcode,days:days,status:status,real_name_time:item.real_name_time,bind_card_time:item.bind_card_time,create_time:item.create_time,email:item.email,code:item.code,id:item.id,mobile:item.mobile,real_name:item.real_name};
					$("#userlistall").tmpl(userlist).appendTo('#userlist');
				});
			});	
		}

		function getNowFormatDate() {
			var date = new Date();
			var seperator1 = "-";
			var seperator2 = ":";
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
					+ " " + date.getHours() + seperator2 + date.getMinutes()
					+ seperator2 + date.getSeconds();
			return currentdate;
		}
		function  DateDiff(sDate1,  sDate2){    //sDate1和sDate2是2006-12-18格式  
			   var  aDate,  oDate1,  oDate2,  iDays  
			   aDate  =  sDate1.split("-")  
			   oDate1  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //转换为12-18-2006格式  
			   aDate  =  sDate2.split("-")  
			   oDate2  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])  
			   iDays  =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24)    //把相差的毫秒数转换为天数  
			   return  iDays  
		} 
});
   
</script> 


</body>
</html>

